<template>
  <el-container>
    <el-form ref="formRegister"
             :model="user"
             class="login-form"
             :rules="registerRules">
      <el-form-item>
        <h1>注册账号</h1>
      </el-form-item>
      <el-form-item prop="username">
        <span class="icon-container">
          <i class="el-icon-user-solid"></i>
        </span>
        <el-input v-model="user.username"
                  placeholder="请输入用户名"
                  name="mobile"
                  type="text" />
      </el-form-item>
      <el-form-item prop="email">
        <span class="icon-container">
          <i class="el-icon-message"></i>
        </span>
        <el-input v-model="user.email"
                  placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <span class="icon-container">
          <i class="el-icon-lock"></i>
        </span>
        <el-input v-model="user.password"
                  placeholder="请输入密码"
                  name="password"
                  show-password />
      </el-form-item>

      <el-button type="primary"
                 style="width: 100%; margin-bottom: 30px"
                 class="loginBtn"
                 @click="register">注册</el-button>

      <div class="tips">
        <span style="margin-right: 20px">已有账号?</span>
        <span @click="$router.push('/login')"
              class="Tologin"> 去登录</span>
      </div>
    </el-form>
  </el-container>
</template>

<script>
import { register } from '@/api/user.js'
export default {
  data() {
    return {
      user: {
        username: '',
        email: '',
        password: '',
      },
      registerRules: {
        username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱必填', trigger: 'blur' }],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' },
          { min: 6, max: 12, message: '密码必须在6-12位之间', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    async register() {
      try {
        //   校验用户输入的数据是否正确
        await this.$refs.formRegister.validate()
        // 发送请求
        await register(this.user)
        // 提示用户
        this.$message.success('注册成功')
        // 清空数据
        this.user = {
          username: '',
          email: '',
          password: '',
        }
        await this.$refs.formRegister.validateField()
        // 跳转页面
        this.$router.push('/login')
      } catch (error) {
        this.$message.error(error)
        console.log(error)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-container,
html,
body {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/11.jpg.png') no-repeat;
  background-size: cover;
}
.el-form {
  width: 500px;
  margin: 150px auto;
}
.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
}
h1 {
  color: #fff;
  font-size: 30px;
  text-align: center;
}
/deep/.el-input {
  .el-input__inner {
    color: #fff;
    height: 50px;
    border: 0px;
    background: rgba(255, 255, 255, 0.4);
    padding-left: 35px;
  }
}
.el-form-item {
  position: relative;
}
.icon-container {
  z-index: 999;
  position: absolute;
  left: -5px;
  top: 0px;
  padding: 6px 5px 6px 15px;
  color: #ccc;
  vertical-align: middle;
  width: 30px;
  display: inline-block;
}
.loginBtn {
  height: 50px;
}
.Tologin {
  cursor: pointer;
}
</style>